<template>
  <div id="app">
    <!-- 水果店--来啦，老弟~~ -->
    <h1>欢迎光临_vue开发的收银系统_水果店</h1>
    <table border="1">
      <tr>
        <td>苹果10￥/斤，折扣&lt;8折&gt;</td>
      </tr>
      <tr>
        <td>请输入你要购买的斤数 <input v-model="weight" type="number" /></td>
      </tr>
      <tr>
        <td><button @click="goToPay">结账买单~</button></td>
      </tr>
      <tr>
        <td>结账单：总价{{ num }}￥元 折后价:{{ price }} ￥元 省了：{{ sales }}￥元</td>
      </tr>
      <tr>
        <td>实际付款：{{ payNum }}￥元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      // 购买斤数
      weight: '0',
      //   总价
      num: '0',
      //   折后价
      price: '0',
      //   省下金额
      sales: '0',
      //   实际付款
      payNum: '0'
    }
  },
  methods: {
    goToPay() {
      this.num = this.weight * 10
      this.price = this.num * 0.8
      this.sales = this.num - this.price
      this.payNum = this.price
    }
  }
}
</script>

<style scoped>
h1 {
  text-align: center;
}
table {
  width: 900px;
  margin: 0 auto;
  border-collapse: collapse;
}
table tr:first-child {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background-color: gray;
}
table tr:last-child {
  color: red;
}
tr {
  height: 40px;
  text-align: center;
}
</style>
